<script setup>
import { ref, reactive, onMounted, onUnmounted } from "vue";
import http from "@/utils/http";
// 引入头部组件
import TopHead from "@/components/TopHead.vue";
import Banners from "@/components/Banners.vue";
import StoryList from "@/components/StoryList.vue"
import Loading from "@/components/Loading.vue"
// export default{
// props:['属性名称'],
//   data(){ return {stories:[]}},
//   created(){
//     axios.get('xx').then(re=>{
//       this.stories=re;
//     })
//   }
// }
let showTopBtn = ref(false);
let scrollDistance = 300; // 滚动距离超过300px时显示按钮

// 监听滚动事件
function handleScroll() {
  let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  showTopBtn.value = scrollTop >= scrollDistance;
}

// 点击按钮时滚动到顶部
function scrollToTop() {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
}

onMounted(() => {
  window.addEventListener('scroll', handleScroll);
});

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll);
});
let stories = reactive({ topStories: [], storyList: [] });//在vue3里面定义一个响应式数组 用reactive()函数创建一个对象在对象里面声明一个数组
http.get("/stories/latest").then(result => {
  stories.topStories = result.data.top_stories;
  stories.storyList = result.data.stories;
});
let isStop = false;
let isShowLoading = ref(false);
let date = new Date();
let year = date.getFullYear();
let month = date.getMonth() + 1;
month = month < 10 ? "0" + month : month;
let day = date.getDate();
day = day > 9 ? day : "0" + day;


window.onscroll = () => {//窗口滚动事件
  let scrollHeight = document.documentElement.scrollHeight;//可滚动高度
  let clientHeight = document.documentElement.clientHeight;//可视高度
  let scrollTop = document.documentElement.scrollTop;//滚动的距离
  // console.log("可滚动高度=>",scrollHeight,"可视高度=>",clientHeight,"滚动的距离=>",scrollTop);
  if (scrollHeight <= clientHeight + parseInt(scrollTop) + 1 && !isShowLoading.value && !isStop) {
    console.log("到底了！！");
    isShowLoading.value = true;
    http.get(`stories/before/${year}${month}${day}`).then((result) => {//格式为20240620
      console.log("获取的结果", result.data.stories);
      stories.storyList.push({
        id:Date.now(),
        timeline:`${year}年${month}月${day}日`,
        showtime:true
      });
      //arr1.concat(arr2)//把数组arr1和arr2进行合并
      stories.storyList = stories.storyList.concat(result.data.stories);//合并数组 把拿到的数据和原数据
      isShowLoading.value = false;
      day = parseInt(day) - 1;//如果当前获取数据成功把日期-1 改为前一天的日期
      if (day < 1) isStop = true;//如果下一次加载的日期里面日小于1就停止加载
      day = day > 9 ? day : "0" + day;
    });
  }
}
// console.log("首页得到服务器的结果==>", result);
// console.log("首页得到topStories==>", stories.topStories)
</script>

<template>
<button v-show="showTopBtn" @click="scrollToTop" class="top-btn">
  <img src="@/assets/huidaodingbu.png" alt="Top" />
</button>
  <main>

    <!-- <div>头</div> -->
    <!-- 首页头部组件 -->
    <TopHead></TopHead>
    <!-- <div>banner图</div> -->
    <!-- 把axios里面得到轮播图数据传入banners组件 -->
    <Banners :top-stories="stories.topStories"></Banners>
    <!-- <div>列表</div> -->
    <StoryList :story-list="stories.storyList"></StoryList>
    <Loading v-show="isShowLoading"></Loading>
  </main>
  
</template>
<style>
.top-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border: none;
  background-color: transparent;
  cursor: pointer;
}

.top-btn img {
  width: 100%;
  height: 100%;
}
</style>